<template>
	<view class="page-bg-hy">
		<view class="page-hy">
			<navbar :title="game_mode_1" />
			<view class="top-hr" style="height: 0px;"></view>

			<!-- 弹框相关 -->
			<block>
				<uv-modal ref="modal" title="温馨提示" @confirm="confirmCreate" :showCancelButton="true">
					<view class="slot-content">
						<rich-text :nodes="content"></rich-text>
					</view>
				</uv-modal>
				<uv-notify ref="uNotify" message="Hi uView" type="success"></uv-notify>


				<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消"
					@confirm="confirmCreate" @cancel="cancelFn"></selectContentView>

				<popRules v-if="showTips" :gameId="gameId" :title="game_info.name" @close="showTips = false"
					@confirm="showTips = false">
				</popRules>
				
				<popLevel v-if="showPop" 
				  :list="type_list" 
					:current="currentId"
					@close="closeLevel"
					@confirm="confirmLevel"
				></popLevel>

				<popPwd v-if="showPwdInput" @confirm="checkPwdFn" @cancel="cancelPwdFn"></popPwd>
			</block>

			<view class="main" :style="{ height: scrollHeight + 'px',justifyContent:pipeiStatus==true?'center':''}">
				<view class="level_item level_1">
					<view style="width:100%;display:flex;flex-direction: row;align-items: center;overflow: hidden;">
						<view style="width: 46px;">
							<image mode="aspectFit" style="width: 100%;overflow: hidden;"
								src="/static/image/app/icon-fktyz.png"></image>
						</view>
						<view class=""
							style="text-align: left;flex: 1;white-space: nowrap;overflow: hidden;padding-left: 10px;">
							<view class="title111">{{game_info.name}}</view>
							<view class="title222">{{game_info.en_name}}</view>
						</view>
						<view>
							<view class="rule-btn" @click="handleToRules">
								规则说明
								<view class="btn-en">Rules Explanation</view>
							</view>
						</view>
					</view>
				</view>

				<view class="level_item level_2">
					<view class="room_box">
						<view class="room_search">
							<view class="search_left">
							</view>
							<view class="search_center">
								<uv-input v-model="keyword" placeholder="请输入房间号" border="none"
									placeholderStyle="font-size: 14px;text-align: center;" clearable></uv-input>
							</view>
							<view class="search_right" @click="fnSearch()">
								搜索｜Search
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="no_data" v-if="!room_list.length">
					<image class="img" src="https://cdn.spbcn.org/spbcnappneed/noDataPlaceImage.png" mode="widthFix">
					</image>
				</view> -->

				<view class="level_item level_3">
					<z-paging style="width: 100%; height: 100%;" :fixed="false" ref="paging" v-model="room_list"
						:default-page-size="limit" @query="getRoomList" :auto="false">
						<view class="no_data" slot="empty">
							<image class="img" src="../../../static/image/noDataPlaceImage.png" mode="widthFix">
							</image>
						</view>
						<view slot="loadingMoreNoMore" class="no_more">- 没有更多了 -</view>
						<!-- <uni-swiper-dot v-show="roomListShow>0" :info="info" :current="current" field="content"
							:mode="mode">
							<swiper class="swiper-box" :style="{height:roomBoxHeight+'px'}" @change="changeSwiper">
								<swiper-item v-for="(item1 ,index1) in room_list" :key="index1">
									<view class="swiper-item">
										<uv-grid :col="2" :border="false">
											<uv-grid-item @click="fnEnterRoom(item2,index2)"
												:customStyle="{height:(roomBoxHeight-50)/3+'px',padding:'10px'}"
												v-for="(item2,index2) in room_list[index1]" :key="index2"> -->
						<view class="room-item-box" @click="fnEnterRoom(item2,index2)"
							:style="{height:(roomBoxHeight-50)/3+'px',padding:'10px'}" v-for="(item2,index2) in room_list"
							:key="index2">
							<view class="room-item">
								<!-- <view class="room-username">{{item2.user_info.username}}的房间</view> -->
								<view v-show="item2.system_auto_created==1" class="room-username">
									<!-- 快速开始游戏 -->
									{{item2.user_info.username}}的房间
								</view>
								<view v-show="item2.system_auto_created==0" class="room-username">
									{{item2.user_info.username}}的房间
								</view>
								<!-- 有密码显示锁 -->
								<view v-if="item2.pwd" class="room-lock"
									:style="{height: ((roomBoxHeight-50)/10)+'px', width: ((roomBoxHeight-50)/10)+'px'}">
									<image class="icon" src="../../../static/image/lock-fill1.png" mode="heightFix"></image>
								</view>
								<!-- 无密码显示头像 -->
								<view v-else class="">
									<image class="room-avatar" :style="{height: ((roomBoxHeight-50)/10)+'px'}"
										src="../../../static/image/fjj/avatar.png" mode="heightFix">
									</image>
								</view>
								<view class="room-bottom">
									<view class="">
										<view class="room-num">房间号{{item2.id}}</view>
										<view class="room-num">{{item2.zubieName}}</view>
									</view>
									<view class="room-num2" v-show="item2.system_auto_created==1">
										{{item2.people_num}}人房
									</view>
									<view class="room-num2" v-show="item2.system_auto_created==0">
										{{item2.group_members_count}} / {{item2.people_num}}
									</view>
								</view>
							</view>
						</view>
						<!-- </uv-grid-item>
										</uv-grid>
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot> -->
					</z-paging>
				</view>

				<view class="level_item level_4">
					<view class="btns">

						<view @click="fnCreateRoom()" class="btn btn1">
							创建房间
							<view class="btn-en">Create Room</view>
						</view>

						<view v-show="pipei_mode_status==1" @click="pipeiClick()" class="btn btn2">
							开始匹配
							<view class="btn-en">Start Matching</view>
						</view>

					</view>
				</view>


			</view>

		</view>
	</view>
</template>

<script>
	import titleBar from '../../../components/games/title-bar.vue'
	import navbar from '../../../components/gamesNav.vue'
	import mifeng from '../../../components/games/mifeng.vue'
	import popRules from '../../../components/popRules.vue'
	import popPwd from '../../../components/popPwd.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			titleBar,
			navbar,
			mifeng,
			popRules,
			popPwd
		},
		onShow: function() {
			var that = this;
			// uni.hideTabBar()
			console.log('App S111how')
			setTimeout(function() {
				that.fnSearch();
			}, 300);

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		computed: {
			game_mode_1() {
				return '蜂竞技-' + this.game_mode.split('|')[0]
			},
			game_mode_2() {
				return this.game_mode.split('|')[1]
			},
		},
		data() {
			return {
				showPop: false,
				userLevel: 0,
				currentId: 0,
				type_list: [],
				game_mode: '',
				pipei_mode_status: 0,

				current: 0,
				
				// socket
				isSuccess: false,
				allReadyStatus: false, //所有人的准备状态
				isClose: false, //如何为true则不需要进行重连
				wsStatus: true, //websocket状态
				downtime_30: 0,

				user_info: {},
				game_info: {
					game_id: 10001, //极速拼词
					max_people_num: 6, //最大房间人数
				},
				show: false,
				title: '标题',
				content: '',

				people_num: 2, //房间人数
				showRoomBox: false,
				keyword: '',

				word: 'apple',
				scrollHeight: 0,
				roomBoxHeight: 0,
				gameWidth: 0,

				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,

				room_list: [],
				roomListShow: false,
				showPromptbox: false,
				msg: '',
				showTips: false,

				pipeiStatus: false, //是否在匹配

				rules: ``,

				pipei_group_info: {},
				pipei_room_object: {
					101: {
						id: 101,
						groupname: '候车大厅：小学组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					},
					102: {
						id: 102,
						groupname: '候车大厅：初中组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					},
					103: {
						id: 103,
						groupname: '候车大厅：高中组-极速拼词',
						grade: 1,
						people_num: 6,
						game_id: 10001
					}
				},
				showPwdInput: false,
				inputPwd: '', // 用户输入的密码
				clickPwd: '', // 用户点击房间的密码
				clickRoomItem: {}, //用户点击的房间数据
				clickRoomIndex: 0, //用户点击的房间下标
				page: 1,
				limit: 4,
				gameId: 0

			};
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.top-hr').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
				that.roomBoxHeight = that.scrollHeight - 80 - 58 - 50;
			}).exec();
		},
		mounted() {
			const that = this

			that.show = true;
			// that.getRoomList();

			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			that.gameId = that.game_info.id

			// 当前选手组别
			const grade = Number(this.user_info.grade)
			this.userLevel = grade < 2 ? 1 : grade < 4 ? 2 : grade < 6 ? 3 : grade < 9 ? 4 : 0

			that.getUserGameRuleReadInfo();
			that.getGameConfigInfo();
			if (options.h5) {
				this.checkBeforeEnterRoom(options.roomNum)
			}
			// that.getInitSystemRoom();
		},
		methods: {
			// 检查是否能进入房间
			checkBeforeEnterRoom(group_id) {
				const that = this
				this.$http.checkBeforeEnterRoom({
					group_id
				}).then(res => {
					if (res.code === 200) {
						uni.navigateTo({
							url: '/pages/games/fktyz/game_fktyz' +
								'?group_info=' + encodeURIComponent(JSON.stringify(res.data)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
							animationType: 'slide-in-bottom', // 右侧滑入效果
							animationDuration: 300 // 动画时长300毫秒
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(function() {
							that.fnSearch();
						}, 1000)
					}
				})
			},
			// 获取该游戏规则阅读状态
			getUserGameRuleReadInfo() {
				var that = this;
				that.$http.getUserGameRuleReadInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					console.log('1*******1')
					console.log(res)
					if (res.code === 200 && !res.data) {
						that.showTips = true;
					}
				})
			},

			handleToRules() {
				uni.navigateTo({
					url: `/pages/games/game_rules?id=${this.gameId}`
				})
			},

			// 获取房间数据
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.pipei_mode_status = res.data.pipei_mode_status;
					}
				})
			},

			// 轮播相关
			changeSwiper(e) {
				this.current = e.detail.current;
			},

			// 消息提示
			fnNotify(msg) {
				var that = this;
				that.$refs.uNotify.close()
				setTimeout(function() {
					that.$refs.uNotify.show({
						top: 50,
						type: 'error',
						color: '#000',
						bgColor: '#e8e8e8',
						message: msg,
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}, 100)
			},

			fnPipei() {
				var that = this;
				that.pipeiStatus = true;

				that.pipei_group_info = that.pipei_room_object['101'];
				console.log(that.pipei_group_info);
				setTimeout(function() {
					// 连接socket
					that.connectSocket()
					// that.getPipeiRoomList();
				}, 1000)
			},

			fnQuitPipei() {
				var that = this;
				var keyword = '离开候车大厅';

				// 离开候车大厅
				var content = "#" + keyword + "#";
				that.fnNotify("#" + keyword + "#");
				// 发送消息
				that.fnSendMessage(content);
				setTimeout(function() {
					that.pipeiStatus = false;

					console.log('beforeDestroy')
					that.isClose = true;
					that.socketTask.close();
				}, 500)
			},

			// 获取房间列表
			// getPipeiRoomList() {
			// 	var that = this;
			// 	that.$http.getPipeiRoomList({
			// 		'people_num': that.people_num
			// 	}).then(res => {
			// 		that.pipeiStatus = false;
			// 		console.log('1*******1')
			// 		console.log(res)
			// 		if (res.code === 200) {
			// 			that.room_list = res.data
			// 			if (that.room_list.length > 0) {
			// 				var item = that.room_list[that.room_list.length - 1];
			// 				var index = that.room_list.length - 1;
			// 				that.fnEnterRoom(item, index);
			// 			} else {
			// 				uni.showToast({
			// 					title: '未匹配到房间，请稍后再试~',
			// 					icon: 'none',
			// 					duration: 2000
			// 				})
			// 			}
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none',
			// 				duration: 2000
			// 			})
			// 		}
			// 	})
			// },

			fnSearch() {
				var that = this;
				this.$refs.paging.reload()
			},


			// 获取房间列表
			getRoomList(page, limit) {
				var that = this;
				that.$http.getRoomList({
					game_mode: that.game_mode,
					keyword: that.keyword,
					page,
					limit: limit * 2,
					test: 1
				}).then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.data);
						this.getInitSystemRoom()
					} else {
						this.$refs.paging.complete(false);
						uni.showToast({
							title: res.msg,
							icon: '',
							duration: 2000
						})
					}
				})
			},

			// 获取系统房间
			getInitSystemRoom() {
				var that = this;
				that.$http.getInitSystemRoom({
					game_mode: that.game_mode,
					keyword: that.keyword,
					test: 1
				}).then(res => {
					if (res.code === 200 && res.count) {
						this.$refs.paging.reload()
					}
				})
			},

			// 确认创建
			confirmCreate() {
				var that = this;
				const params = {
					game_id: that.game_info.id,
					people_num: that.people_num,
				}
				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;

						uni.redirectTo({
							url: '/pages/games/fktyz/game_fktyz?group_info=' + encodeURIComponent(JSON
								.stringify(
									group_info))
						})
					}
				})
			},

			// 创建房间
			fnCreateRoom() {
				var that = this;
				uni.navigateTo({
					url: '/pages/games/fktyz/game_fktyz_create_room?' +
						'game_mode=' + that.game_mode +
						'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
					animationType: 'slide-in-bottom', // 右侧滑入效果
					animationDuration: 300 // 动画时长300毫秒
				})
			},
			pipeiClick () {
				this.$http.getTypeListHy({
					pid: 9000,
				}).then(res => {
					if (res.code === 200) {
						this.type_list = res.data;
						const obj = this.type_list.find(item => item.sort_number == this.userLevel)
						const current_type_info = obj.isExpired == 0 ? obj : this.type_list[0].isExpired == 0 ? this.type_list[0] : {}
						this.currentId = current_type_info.id
						this.showPop = true
					}
				})
			},
			closeLevel () {
				this.showPop = false
			},
			confirmLevel (id) {
				if (id) {
					let str = this.type_list.find(item => item.id == id).title
					this.fnPipeiRoom(id, str)
				} else {
					uni.showToast({
						title: '请选择组别',
						icon: 'none'
					})
				}
				this.showPop = false
			},

			// 匹配房间
			fnPipeiRoom(id, str) {
				var that = this;
				uni.navigateTo({
					url: '/pages/games/fktyz/game_fktyz_pipei_room?' +
						'game_mode=' + that.game_mode +
						'&level=' + id +
						'&levelStr=' + str +
						'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
					animationType: 'slide-in-bottom', // 右侧滑入效果
					animationDuration: 300 // 动画时长300毫秒
				})
			},

			cancelFn() {
				this.showPromptbox = false
			},

			// 查看房间列表
			fnOpenRoomList() {
				var that = this;
				that.showRoomBox = true;

				// that.playAnimation('show_room_btn');
			},

			// 进入房间
			fnEnterRoom(item, index) {
				var that = this;

				if ('判断网络状态') {
					if (!that.$util.getNetWorkStatus()) {
						return false;
					}
				}

				if (item.pwd && item.pwd != '') {
					//密码校验
					this.showPwdInput = true
					this.clickPwd = item.pwd
					this.clickRoomItem = item
					this.clickRoomIndex = index
				} else {
					this.checkPwdFn = false;
					that.fnContinueEnterRoom(item, index);
				}
			},

			// 密码确认
			checkPwdFn(pwd) {
				this.inputPwd = pwd
				if (!this.inputPwd) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				} else {
					if (this.inputPwd == this.clickPwd) {
						this.showPwdInput = false;
						this.fnContinueEnterRoom(this.clickRoomItem, this.clickRoomIndex);
					} else {
						uni.showToast({
							title: '密码不正确',
							icon: 'none'
						})
					}
				}
			},
			cancelPwdFn() {
				this.showPwdInput = false
			},
			fnContinueEnterRoom(item, index) {
				var that = this;
				const params = {
					group_id: item.id,
				}
				that.$http.checkBeforeEnterRoom(params).then(res => {
					if (res.code === 200) {
						item = res.data;
						// var group_info = {
						// 	"id": item.id,
						// 	"user_id": item.user_id, //房主
						// 	"avatar": item.avatar ? item.avatar : "http://chat.soullions.com/avatar.jpg",
						// 	"sign": item.sign,
						// 	"groupname": item.groupname,
						// };
						uni.navigateTo({
							url: '/pages/games/fktyz/game_fktyz' +
								'?group_info=' + encodeURIComponent(JSON.stringify(item)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
							animationType: 'slide-in-bottom', // 右侧滑入效果
							animationDuration: 300 // 动画时长300毫秒
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(function() {
							that.fnSearch();
						}, 1000)
					}
				})
			},

			fnChangeGameMode(type) {
				if (type == 'online') {
					uni.navigateTo({
						url: '/pages/games/fktyz/game_fktyz_create_room'
					})
				}
			},

			// 关闭弹框
			close() {
				var that = this;
				that.show = false;
			},

			handleToGame() {
				uni.navigateTo({
					url: '/pages/game_round_1/game'
				})
			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rule-btn {
		color: #000;
		font-size: 16px;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		box-shadow: 0 6px 0 0 #d9b059;
		border-radius: 8px;
		width: 100px;
		height: 40px;
		// line-height: 40px;
		text-align: center;
		padding-top: 6px;
		box-sizing: border-box;
		font-family: hzgb;
	}
	.page-bg-hy {
		background: radial-gradient(circle, #373632, #130e00);
		width: 100%;
		height: 100vh;
	}
	.page-hy {
		background-image: url(/static/image/homePage/diwen-hy.png);
		background-size: 100px 100px;
		background-position: center;
		width: 100%;
		height: 100vh;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
	}

	.main {
		// border: 2px solid blue;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		position: relative;

		.level_item {
			// overflow: hidden;
		}
	}

	.level_1 {
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0px 20px;
	}

	.level_2 {
		height: 58px;
		border-radius: 20px;
		color: white;

		.pipei_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 16px auto 0;
		}

		.pipei_room_btn_ing {
			width: 200px;
			color: white;
			margin: 20px auto 0;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ff2b1d, #ff2b1d);
			box-shadow: 0px 7px 0px 0px rgba(184, 28, 37, 1);
			margin: 0 auto;
		}

		.create_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
		}

		.show_room_btn {
			width: 120px;
			margin: 20px auto;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 40px;
			line-height: 40px;
			color: black;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 6px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 0 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: #fff8e1;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;
				font-family: normal;
				margin-bottom: 10px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 110px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
					text-align: center;
				}
			}
		}
	}

	.level_3 {
		flex: 1;
		overflow: hidden;
		border-radius: 20px;
		color: white;
		// background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));

		.create_room_btn {
			width: 200px;
			color: black;
			font-weight: bold;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
		}

		.show_room_btn {
			width: 120px;
			margin: 20px auto;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 40px;
			line-height: 40px;
			color: black;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 6px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: #fff8e1;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;
				font-family: normal;
				margin-bottom: 10px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 110px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
				}
			}
		}
	}

	.level_4 {
		height: 66px;
		color: white;
	}


	.range {
		color: #fff;
		margin-top: 18px;
		font-size: 18px;
	}

	// 创建房间页面，选择人数的滑块样式
	::v-deep .uni-slider-handle-wrapper {
		height: 14px !important;
		border-radius: 14px !important;
	}

	::v-deep .uni-slider-track {
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.operate {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 30px;

		.rank-icon {
			width: 30px;
			height: 30px;
			border-radius: 4px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0 4px 0 0 #d9b059;
			margin-bottom: 12px;

			.img {
				width: 30px;
				height: 30px;
			}
		}

		.rank-icon-null {
			background: linear-gradient(to top, #cfcfcf, #a1a1a1);
			box-shadow: 0 4px 0 0 #969696;
		}
	}

	.title111 {
		color: #fff;
		font-size: 26px;
		font-family: hzgb;
		margin-bottom: 6px;
	}

	.title222 {
		color: #fff;
		font-size: 14px;
		font-family: hzgb;
	}

	.room-item-box {
		width: 50%;
		display: inline-block;
	}

	.room-item {
		width: 100%;
		height: 100%;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 10px;
		padding: 2px 12px;
		box-sizing: border-box;
		font-family: normal;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		text-align: center;

		.room-username {
			font-size: 14px;
			color: #fff;
			font-weight: bold;
			border: 1px solid #ffd16b;
			border-radius: 6px;
			padding: 0 8px;
			height: 32px;
			text-align: left;
			white-space: nowrap;
			/* 确保文本在一行内显示 */
			overflow: hidden;
			/* 隐藏超出容器的文本 */
			text-overflow: ellipsis;
			/* 使用省略号表示被截断的文本 */
			display: flex;
			align-items: center;
		}

		.room-avatar {
			height: 30%;
			border-radius: 40px;
			// margin: 10px 0;
		}

		.room-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: left;
		}

		.room-num2 {
			font-size: 16px;
			font-family: hzgb;
		}

		.room-num {
			font-size: 12px;
			margin-top: 2px;
		}

		.room-lock {
			border: 2px solid #ffd16b;
			border-radius: 100%;
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 60%;
				height: 60%;
			}
		}
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.btn {
			width: 140px;
			height: 40px;
			text-align: center;
			// line-height: 40px;
			font-size: 16px;
			font-family: hzgb;
			border-radius: 10px;
			padding-top: 6px;
		}

		.btn1 {
			background: linear-gradient(to top, #130e00, #373632);
			box-shadow: 0 6px 0 0 #363531;
		}

		.btn2 {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}

	.no_data {
		text-align: center;
		padding-top: 40px;
		width: 100%;

		.img {
			width: 40%;
		}
	}

	.no_more {
		font-size: 14px;
		color: #74736f;
		text-align: center;
		padding: 16px 0;
	}

	::v-deep .zp-l-container {
		display: none;
	}
</style>